:host {
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--overlay-background, quark-fillMaskColor);
  visibility: hidden;
  opacity: 0;
  transition: quark-animationDurationBase;
}

:host([open]) {
  opacity: 1;
  z-index: var(--overlay-z-index, 999);
  visibility: visible;
}

:host .quark-overlay-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: -1;
}

:host .quark-overlay {
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
